<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- <form action="" method="post" enctype="application/x-www-form-urlencoded">
			
			<input type="submit" value=""/>
		</form>
		 -->
		
		姓名：<input type="text" class="username" id="" value="" /><br>
		年龄：<input type="text" class="age" /><br>
		<button>点击发送post的ajax</button>
		<script type="text/javascript">
		
			// post 的区别 1.open的方式是 post  2. 发送数据通过send发送；(格式：name=zhangsan&age=20) 3.需要设置post请求头的格式；
		
		// 客户端    ----- 1.数据 2.请求头（request header） ---->            服务端
		// 服务端----  1.数据 2.返还头（response header）------> 客户端
		
				var btn = document.querySelector("button");
				var userEle = document.querySelector(".username");
				var ageEle = document.querySelector(".age");
				btn.onclick = function(){
					var username = userEle.value;
					var age  =ageEle.value;
					
					
					// 新建ajax 发送ajax请求
					let xhr = new XMLHttpRequest();
					// ?username=张三&age=20
					xhr.open("POST","post.php",true);
					// 设置post的请求头部
					xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
					
					xhr.onload = function(){
							// console.log(xhr.responseText);  //服务端返还给客户端；
							console.log(JSON.parse(xhr.responseText));
					}
					var data = `username=${username}&age=${age}`;
					xhr.send(data);
				}
		</script>
	</body>
</html>
